<template>
    <view style="width: 750upx;margin-top: 20upx;background: #FEFEFE;padding-left: 30upx;padding-right: 30upx;overflow-x: hidden;padding-top: 10upx;">
        <view class="top">
            <view class="goal">
                <image src="../../static/setgoal/travel.png" style="height: 80upx;width: 80upx;"></image>
            </view>
            <view class="search">
                <input type="number" value="" focus placeholder="完成目标天数" class="input" placeholder-class="placeholder"
                    v-model="number" @blur="setnum" />
            </view>
        </view>
        <view class="text">
            <text class="num">最小天数为7天</text>
        </view>
        <view class="daynum">
            <view class="day" @tap.stop="getnum(7)">7天</view>
            <view class="day" style="padding-left:10upx" @tap.stop="getnum(21)">21天</view>
            <view class="day" style="padding-left:10upx" @tap.stop="getnum(30)">30天</view>
            <view class="day" style="padding-left:5upx" @tap.stop="getnum(100)">100天</view>
            <view class="day" style="padding-left:5upx" @tap.stop="getnum(150)">150天</view>
        </view>
        <view class="top">
            <view class="goal">
                <image src="../../static/setgoal/coffer.png" style="height: 80upx;width: 80upx;"></image>
            </view>
            <view class="search">
                <input type="number" value="" placeholder="休假时间" class="input" placeholder-class="placeholder" v-model="time"
                    @blur="settime" />
            </view>
        </view>
        <view class="text">
            <text class="num">最大休假天数为{{xiujia}}天</text>
        </view>
        <view class="top">
            <view class="goal">
                <image src="../../static/setgoal/interger2.png" style="height:80upx;width: 80upx;"></image>
            </view>
            <view class="search">
                <input type="number" value="" placeholder="设置挑战积分" class="input" placeholder-class="placeholder"
                    v-model="integer" @blur="setintet" />
            </view>
        </view>
        <view class="text">
            <text class="num">最小挑战积分10</text>
        </view>
        <view class="integral "">
            <view class=" label" @tap.stop="jifen(10)">10</view>
        <view class="label" @tap.stop="jifen(50)">50</view>
        <view class="label" @tap.stop="jifen(100)">100</view>
        <view class="label" @tap.stop="jifen(150)">150</view>
        <view class="label" @tap.stop="jifen(200)">200</view>
        <view class="label" @tap.stop="jifen(150)">150</view>
        <view class="label" @tap.stop="jifen(300)">300</view>
        <view class="label" @tap.stop="jifen(350)">350</view>
        <view class="label" @tap.stop="jifen(400)">400</view>
    </view>
    <view class="top">
        <view class="goal">
            <image src="../../static/setgoal/check.png" style="height:70upx;width: 70upx;"></image>
        </view>
        <view class="searchs">
            <text class="title">首次签到时间</text>
            <view class="time">
                <text class="timetxt">今天 ({{day}})</text>
                <view class="radio">
                    <checkbox class='round blue' :class="checked == 0 ?'checked':''" :checked="checked == 0?true:false"
                        @tap.stop="check(0)"></checkbox>
                </view>
            </view>
            <view class="time">
                <text class="timetxt">明天 ({{tomorrow}})</text>
                <view class="radio">
                    <checkbox class='round blue' :class="checked == 1?'checked':''" :checked="checked == 1 ?true:false"
                        value="C" @tap.stop="check(1)"></checkbox>
                </view>
            </view>
        </view>
    </view>
    <view class="dingwei">
        <button size="default" @tap="goto" hover-class="button-hover" class="button">立下目标</button>
    </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                message: "",
                checked: 0,
                number: "",
                time: "",
                integer: "",
                day: "",
                tomorrow: "",
                xiujia:0
            }
        },
        methods: {
            getnum(index) {
                this.number = index
            },
            setnum() {
                if (parseInt(this.number) < 7) {
                    this.number = 7;
                }
                
             let time =parseInt(parseInt(this.number)/7) 
             
             this.time = time*2;
                this.xiujia = parseInt(this.number) - time*2
            },
            settime() {
               
               if(this.time >  this.xiujia){
                   this.time =  this.xiujia
               }
               
            },
            setintet() {
                if (parseInt(this.integer) < 10) {
                    this.integer = 10;
                }
                if (parseInt(this.integer) > 400) {
                    this.integer = 400;
                }
            },
            jifen(jifen) {
                this.integer = jifen
            },
            getNowFormatDate(sum) {

                if (sum == 0) {

                    var date = new Date();
                    var seperator1 = "-";

                    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                    var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

                    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    return currentdate;

                }

                if (sum == 1) {
                    var day3 = new Date();
                    day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000);
                    var month = day3.getMonth() + 1 < 10 ? "0" + (day3.getMonth() + 1) : day3.getMonth() + 1;
                    var strDate = day3.getDate() < 10 ? "0" + day3.getDate() : day3.getDate();

                    var s3 = day3.getFullYear() + "-" + month + "-" + strDate;

                    return s3
                }



            },
            check(index) {

                this.checked = index;


            },
            goto() {

                if (this.number == "") {
                    uni.showToast({
                        title: '请填写计划天数',
                        duration: 2000,
                        icon: "none",
                        image: "../../static/setgoal/sigh.png"
                    });
                    return;
                }

                if (this.time == "") {
                    uni.showToast({
                        title: '请填写休假天数',
                        duration: 2000,
                        icon: "none",
                        image: "../../static/setgoal/sigh.png"
                    });
                    return;
                }

                if (this.integer == "") {
                    uni.showToast({
                        title: '请填写积分',
                        duration: 2000,
                        icon: "none",
                        image: "../../static/setgoal/sigh.png"
                    });
                    return;
                }

                
                let c = this;
                
                this.$api.test({
                 url: 'setgoals/setgoal',
                 data: {
                     message: c.message,
                     signNum: c.number,
                     vacationNum: c.time,
                     integral: c.integer,
                     signJude: c.checked
                 },
                 method: "POST",
                 header: {
                     'content-type': 'application/x-www-form-urlencoded'
                 }
                }).then((res) =>{
               console.log(res.data);
               
                                       uni.setStorage({
                   key: 'hassetgoal',
                   data: 1,
                   success: function () {
                       console.log('success');
                   }
               });
               
               uni.navigateBack({
                                        delta: 2
                                   })
                })
 
            }
        },
        onLoad() {
            let c = this;
            uni.getStorage({
                key: "goalname",
                success(res) {
                    c.message = res.data;
                }
            })

            this.day = this.getNowFormatDate(0);
            this.tomorrow = this.getNowFormatDate(1);

        },
        onShow() {
            console.log(this.message);
        }


    }
</script>

<style>
    .top {
        padding-top: 30upx;
        display: flex;
        flex-direction: row;
    }

    .search {
        padding-left: 30upx;
    }

    .input {
        background-color: #efefef;
        border: 1px solid #FEFEFE;
        border-radius: 40upx;
        width: 600upx;
        height: 80upx;
        padding-left: 30upx;
        padding-right: 30upx;
        padding-right: 10upx;
    }

    .text {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        padding-right: 30upx;
    }

    .num {
        font-size: 25upx;
        color: #358cbb;
    }

    .placeholder {
        padding-left: 10upx;
        font-size: 35upx;
        color: #999999;
    }

    .title {
        color: #333333;
        font-weight: 800;
        font-size: 35upx;
    }

    .searchs {
        padding-top: 10upx;
        padding-left: 40upx;
    }

    .time {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 2upx solid #38799A;
        padding-top: 30upx;
        padding-bottom: 30upx;
    }

    .daynum {
        display: flex;
        flex-direction: row;
        padding-left: 100upx;
        padding-top: 20upx;

    }

    .day {
        border-radius: 250upx;
        background-color: #ffcf8a;
        color: white;
        font-weight: 800;
        font-size: 30upx;
        height: 90upx;
        width: 90upx;
        margin-right: 30upx;
        padding-left: 20upx;
        padding-top: 20upx;
    }

    .day:hover {
        border-radius: 250upx;
        background-color: #ff9f19;
        color: white;
        font-weight: 800;
        font-size: 30upx;
        height: 90upx;
        width: 90upx;
        margin-right: 30upx;
        padding-left: 20upx;
        padding-top: 20upx;
    }

    .integral {
        display: flex;
        flex-direction: row;
        padding-top: 20upx;
        width: 750upx;
        flex-wrap: wrap;
        padding-bottom: 30upx;
    }

    .label {
        height: 70upx;
        width: 120upx;
        border-radius: 35upx;
        border: #ffcf8a solid 1upx;
        padding-left: 30upx;
        color: #ffcf8a;
        font-size: 35upx;
        margin-right: 30upx;
        margin-top: 40upx;
        padding-top: 5upx;
    }

    .timetext {
        font-size: 40upx;
        color: #333333;
        width: 500upx;
    }

    .radio {
        padding-left: 250upx;
        font-size: 35upx;
    }

    .dingwei {
        margin-top: 30upx;
        padding-bottom: 40upx;
        width: 690upx;
        background-color: #FEFEFE;
        height: 170upx;
    }

    .button {
        background-color: #fe9f1a;
        border-radius: 50upx;
        height: 85upx;
        padding-bottom: 30upx;
        font-size: 35upx;
        font-weight: 800;
        color: white;
        width: 100%;
    }
</style>
